<template>
	<view class="hudongPage">
		<block  v-for="(item,index) in list" :key="index">
		<view class="huodongflexBox" v-if="item.user_id!=userId">
			<view class="huodongtime">{{item.created_at}}</view>
			<view class="flexItemMain">
				<image class="flexItemLeftImg" @click="toPage(item)" :src="item.avatar[0]" mode="aspectFill"></image>
				<view class="flexItemCenter" @click="toDetail(item)">
					<view class="flexItemCenterTop">
						<view class="flexItemCenterTopName">
							{{item.nickname}}
						</view>
						<!-- <view class="flexItemCenterTopSexBox">
							<image src="../../static/pages/sex.png" class="sexImg" mode="aspectFill"></image>
							{{item.age}}
						</view> -->
						<view class="flexItemCenterTopSexBox" v-if="item.sex==2">
							<image class="sexImg" src="../../static/dongtai/sex.png"></image>
							{{item.age}}
						</view>
						<view class="flexItemCenterTopSexBox2" v-if="item.sex==1">
							<image class="sexImg" src="../../static/pages/sex.png"></image>
							{{item.age}}
						</view>
					</view>
					<view class="flexItemCenterBottom" >{{item.content}}</view>
				</view>
				<image v-if="item.image.length>0" :src="item.image[0]" class="flexItemRightImg" mode="aspectFill"></image>
			</view>
		</view>
		</block>
	</view>
</template>

<script>
	export default {  
	        data() {  
	            return { 
					list:[],
					userId:''
				}  
	        }, 
			methods:{
				getData(){
					let that = this
					this.$utils.postrequest("/api/message/interactionList", {
						page:1
					}, function (res) {
					   if(res.code==200){
						   // console.log('--------',res.data)
						   if(res.data.length>0){
							   res.data.forEach((item)=>{
								   item.avatar=JSON.parse(item.avatar)
								   item.image=JSON.parse(item.image)
							   })
						   }
						  that.list = res.data
						  
						}
					})
				},
				getYiDu() {
					let that = this
					this.$utils.postrequest("/api/message/interactionIsRead", {
					}, function (res) {
					   // console.log(res)
					})
				},
				toDetail(item) {
					uni.navigateTo({
						url: '/pages/dynami/detail?id=' + item.dynamic_id
					})
				},
				toPage(item){
					uni.navigateTo({
						url:'/pages/my/mydongtai?id='+item.user_id
					})
				}
			},
			onShow(){
				this.userId=uni.getStorageSync('userId')
				this.getData()
				this.getYiDu()
			}
	    }  
</script>

<style scoped>
	page{
		background-color: #F5F5F7;
		width: 100%;
		height: 100%;
	}
	.hudongPage{
		
	}
	.huodongflexBox{
	}
	
	.huodongtime{
		text-align: center;
		font-size: 26rpx;
		
		color: #B9BCCB;
		margin-top: 57rpx;
	}
	.flexItemMain{
		  display: flex;
		  flex-direction: row;
		  align-items: center;
		  padding-top: 30rpx;
		  padding-bottom: 39rpx;
		  margin:23rpx 29rpx 30rpx 31rpx;
		  background-color: #fff;
		  border-radius: 20rpx;
		}
		.flexItemLeftImg{
			width:111rpx;
			height: 111rpx;
			border-radius: 100%;
			flex: none;
			margin-right: 13rpx;
			margin-left:30rpx;
		}
		.flexItemCenter{
			 flex: auto;
			 text-align: left;
		}
		.flexItemRightImg{
			width: 113rpx;
			height: 119rpx;
			flex: none;
			margin-right:29rpx;
		}
		.flexItemLeft{
		    flex: none;
		    border-radius: 100%;
		    overflow: hidden;
		    width:60rpx;
		    height:60rpx;
		    margin-left: 30rpx;
		    margin-right: 20rpx;
		}
		
		.flexItemLeft image{
		    width: 100%;
		    height: 100%;
		}
		
		.flexItemCenterTop{
		     display: flex;
			 align-items: center;
			 margin-bottom: 20rpx;
		}
		.flexItemCenterTopName{
			font-size: 26rpx;
			
			color: #141222;
			margin-right: 16rpx;
		}
		.flexItemCenterTopSexBox{
			display: flex;
			align-items: center;
			font-size: 14rpx;
			
			color: #FFFFFF;
			padding:3rpx 13rpx;
			background: linear-gradient(-86deg, #5CCBFF, #5C8CFF);
			border-radius: 18rpx;
		}
		.flexItemCenterTopSexBox2{
			display: flex;
			align-items: center;
			font-size: 14rpx;
			
			color: #FFFFFF;
			padding:3rpx 13rpx;
			background: linear-gradient(-90deg, #5FCAFF, #5B8DFE);
			border-radius: 18rpx;
		}
		.sexImg{
			width: 15rpx;
			height: 15rpx;
			margin-right: 6rpx;
		}
		.flexItemCenterBottom{
		     font-size: 24rpx;
		     
		     color: #868895;
		}
		.flexrow{
		     display: flex;
		     align-items: center;
		}
		
		.flexItemXian{
		   margin-right: 30rpx;
		   margin-left:30rpx;
		   height: 1rpx;
		   background-color: #DCDCDC;
		}
</style>
